<template>
	<!-- 横版卡片 -->
	<view v-if="line" style="display: flex; justify-content: space-between;position: relative;margin-bottom: 5px;">
		<view style="display: flex;gap: 10px;">
			<image class="image" :src="sConf.pics + (data.cover ?? [])[0]?.url" mode="scaleToFill" @click="dataChange"
				style="border-radius: 5px 0 0 5px;width: 96px;height: 128px;flex-basis:96px;" />
			<view style="padding: 5px 0;display: flex;flex-direction: column;justify-content: space-between;">
				<view class="textView" style="font-weight: bold;" @click="dataChange"> {{ data.name }} </view>
				<view class="textView" style="font-size: x-small;color: #999;">{{ data.jingle?.jingle }} </view>
				<view v-if="card" style="display: flex;gap: 10px;align-items: end;">
					<text style="color: #dd524d;">加</text>
					<text style="color: #dd524d;font-weight: bold;">￥{{ (data.cur_card / 100).toFixed(2) }}</text>
					<text style="color: #dd524d;font-size: small;">换购</text>
					<view style="color:#888;font-size: small;">热销 {{ data.hot > 999?'999+': data.hot }} </view>
				</view>
				<view v-else-if="point" style="display: flex;gap: 10px;align-items: end;">
					<text style="color: #007aff;font-weight: bold;">{{ data.cur_point }}</text>
					<text style="color: #007aff;font-size: small;">积分兑换</text>
					<view style="color:#888;font-size: small;">热销 {{ data.hot > 999?'999+': data.hot  }} </view>
				</view>
				<view v-else-if="master" style="display: flex;gap: 10px;align-items: end;">
					<text style="color: #dd524d;font-weight: bold;">￥{{ (data.cur_price / 100).toFixed(2) }}</text>
					<text style="color: #dd524d;font-size: small;">抵扣价</text>
					<view style="color:#888;font-size: small;">热销 {{ data.hot > 999?'999+': data.hot  }} </view>
				</view>
				<view v-else style="display: flex;gap: 10px;align-items: end;">
					<text style="color: #dd524d;font-weight: bold;">￥{{ (data.price.price / 100).toFixed(2) }}</text>
					<text style="color: #dd524d;font-size: small;">会员价</text>
					<view style="color:#888;font-size: small;">热销 {{ data.hot > 999?'999+': data.hot  }} </view>
				</view>
				<view style="display: flex;gap: 5px;">
					<tn-tag v-for="(tag, index) in data.tag" :key="index" type="info" shape="round" font-size="16"
						size="sm" border :bg-color="tag.bgcolor" :text-color="tag.color"
						:border-color="tag.color">{{ tag.name }}</tn-tag>
				</view>
				<view v-if="spec !== null" style="display: flex;align-items: center;gap: 5px;padding: 5px 0;">
					<image :src="sConf.pics + spec.icon" mode="scaleToFill" style="width: 32px;height: 32px;"></image>
					<view style="font-size: small;">{{ spec.name }}</view>
					<view class="">￥{{ (spec.price / 100).toFixed(2) }}</view>
				</view>
			</view>
		</view>
		<tn-icon v-if="data.is_share" name="bookmark-fill" color="#dd524d" size="48" offset-top="-8"
			style="position: absolute;top:0;left:0"></tn-icon>
		<tn-icon v-if="like && !data.is_like" name="like-lack" color="#dd524d" size="48" click-modifiers="stop"
			style="position: absolute;top:0;right: 0;padding: 10px;" @click="likeChange" />
		<tn-icon v-if="like && data.is_like" name="like-lack-fill" color="#dd524d" size="48" click-modifiers="stop"
			style="position: absolute;top:0;right: 0;padding: 10px;" @click="likeChange" />
		<tn-icon v-if="cart" name="cart" size="40" color="#f0ad4e" click-modifiers="stop"
			style="position: absolute;bottom:0;right: 0;padding: 10px;z-index:100;" @click.stop="cartChange" />
		<view v-if="fund > 0" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
			<view style="display: flex;align-items: flex-start;gap: 5px;">
				<text>x</text><text style="font-size: larger;">{{ fund }}</text>
			</view>
		</view>
	</view>
	<!-- 竖版卡片 -->
	<view v-if="!line" class="block-data"
		style="display: flex;flex-direction: column;padding-bottom: 5px;position: relative;">
		<image class="image" :src="sConf.pics + (data.cover ?? [])[0]?.url" mode="widthFix" @click="dataChange"
			style="border-radius: 5px 5px 0 0;" />
		<view style="padding: 5px 0;display: flex;flex-direction: column;gap: 5px;">
			<view class="textView" style="font-weight: bold;" @click="dataChange"> {{ data.name }} </view>
			<view v-if="card" style="display: flex;gap: 10px;align-items: center;justify-content: space-between;">
				<text style="color: #dd524d;">加</text>
				<text style="color: #dd524d;font-weight: bold;">￥{{ (data.cur_card / 100).toFixed(2) }}</text>
				<!--text style="color: #dd524d;font-size: small;">换购</text-->
				<view style="color:#888;font-size: small;">热销 {{ data.hot > 999?'999+': data.hot }} </view>
			</view>
			<view v-else-if="point" style="display: flex;gap: 10px;align-items: center;justify-content: space-between;">
				<text style="color: #007aff;font-weight: bold;">{{ data.cur_point }}</text>
				<!--text style="color: #007aff;font-size: small;">积分兑换</text-->
				<view style="color:#888;font-size: small;">热销 {{ data.hot > 999?'999+': data.hot  }} </view>
			</view>
			<view v-else-if="master" style="display: flex;gap: 10px;align-items: center;justify-content: space-between;">
				<text style="color: #dd524d;font-weight: bold;">￥{{ (data.cur_price / 100).toFixed(2) }}</text>
				<!--text style="color: #dd524d;font-size: small;">抵扣价</text-->
				<view style="color:#888;font-size: small;">热销 {{ data.hot > 999?'999+': data.hot  }} </view>
			</view>
			<view v-else style="display: flex;gap: 10px;align-items: center;justify-content: space-between;">
				<text style="color: #dd524d;font-weight: bold;">￥{{ (data.price.price / 100).toFixed(2) }}</text>
				<!--text style="color: #dd524d;font-size: small;">会员价</text-->
				<view style="color:#888;font-size: small;">热销 {{ data.hot > 999?'999+': data.hot }} </view>
			</view>

			<view style="display: flex;gap: 5px;">
				<tn-tag v-for="(tag, index) in data.tag" :key="index" type="info" shape="round" font-size="16" size="sm"
					border :bg-color="tag.bgcolor" :text-color="tag.color"
					:border-color="tag.color">{{ tag.name }}</tn-tag>
			</view>

		</view>
		<tn-icon v-if="data.is_share && false" name="bookmark-fill" color="#dd524d" size="64" offset-top="-8"
			style="position: absolute;top:0;left:0"></tn-icon>
		<tn-icon v-if="like && !data.is_like" name="like-lack" color="#dd524d" size="64" click-modifiers="stop"
			style="position: absolute;top:0;right: 0;padding: 10px;" @click="likeChange" />
		<tn-icon v-if="like && data.is_like" name="like-lack-fill" color="#dd524d" size="64" click-modifiers="stop"
			style="position: absolute;top:0;right: 0;padding: 10px;" @click="likeChange" />
		<tn-icon v-if="cart" name="cart" size="40" color="#f0ad4e" click-modifiers="stop"
			style="position: absolute;bottom:0;right: 0;padding: 10px;z-index:100;" @click="cartChange" />
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		name: "sub-product-card",
		data() {
			return {
				sConf: getApp().globalData,
			};
		},
		props: {
			line: {
				type: Boolean,
				default: false
			},
			like: {
				type: Boolean,
				default: false
			},
			cart: {
				type: Boolean,
				default: false
			},
			card: {
				type: Boolean,
				default: false
			},
			point: {
				type: Boolean,
				default: false
			},
			master: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: null
			},
			spec: {
				type: Object,
				default: null
			},
			fund: {
				type: Number,
				default: 0
			}
		},
		methods: {
			dataChange() {
				console.log('点击事件', this.data.id);
				this.$emit('puctPlay', this.data.id);
			},
			likeChange() {
				console.log('收藏事件');
				let host = this.sConf.host + '/weapps/favored/'
				let token = this.sConf.token || '';
				let data = {
					sid: this.sConf.auth.id,
					puid: this.data.id,
					status: this.data.is_like ? 0 : 1
				}
				utils.authenticatorOnPost(host, token, data).then((res) => {
					console.log('切换收藏夹', res);
					this.data.is_like = !this.data.is_like;
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '操作失败'
					})
				});
			},
			cartChange() {
				console.log('加入购物车');
				let host = this.sConf.host + '/weapps/cart/';
				let token = this.sConf.token || '';
				let data = {
					sid: this.sConf.auth.id,
					puid: this.data.id,
					pid: this.data.pid,
					num: 1,
					status: 1
				}
				utils.authenticatorOnPost(host, token, data).then((res) => {
					console.log('请求成功', res);
					uni.showModal({
						title: '加入购物车成功',
						content: '是否要查看购物车',
						showCancel: true,
						cancelText: '否',
						confirmText: '是',
						success(res) {
							if (res.confirm) {
								console.log('进入购物车');
								uni.redirectTo({
									url: '/pageb/puctcart/puctcart'
								});
							}
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '操作失败'
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	.block-data {
		width: calc(100% - 10rpx);
		margin: 5rpx;

		.image {
			width: 100%;
			height: auto;
		}
	}
</style>